<template>
	<!-- 登录页面 -->
	<div class="login">
		<div class="login-card">
			<div class="login-bg">
				<img src="../../assets/image/bg2.png" alt="">
			</div>
			<div class="login-form">
				<div class="form-head">登录</div>
				<div class="form-content">
					<el-form :model="loginForm" :rules="rules" ref="loginRef" label-position="top">
						<el-form-item prop="loginName">
							<el-input v-model="loginForm.loginName" autocomplete="off">
								<template #prefix>
									<el-icon style="font-size: 20px; color: #11b9d0; margin-top: 5px;"><user /></el-icon>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<el-input type="password" v-model="loginForm.password" autocomplete="off">
								<template #prefix>
									<i class="iconfont icon-mima" style="font-size: 20px; color: #11b9d0;"></i>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item >
							<el-button class="login-btn" @click="submit">登 录</el-button>
						</el-form-item>
					</el-form>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { User } from '@element-plus/icons-vue'
import { defineComponent, reactive, ref, onMounted } from "@vue/runtime-core";
import useUser from "../../hook/user";
import useRequet, { RespData } from "../../hook/network";
import { ElMessage } from 'element-plus'
import router from '../../router';

const SUCCESS = 0
export default defineComponent({
	components: {User}, 
	name: "Login",
	setup() {
		const loginForm = reactive({
			loginName: "",
			password: "",
		});

		const request = useRequet({ path: "" });
		// let isLogin = userToken.setToken();

		const validatePassWord = (rule: object, value: string, callback: Function) => {
			if (value === "") {
				callback(new Error("请输入密码"));
			} else {
				// 这里可以更多校验
				callback();
			}
		};

		const validateloginName = (rule: object, value: string, callback: Function) => {
			if (value === "") {
				callback(new Error("请输入用户名"));
			} else {
				// 这里可以更多校验
				callback();
			}
		};

		const rules = {
			password: [{ validator: validatePassWord, trigger: "blur" }],
			loginName: [{ validator: validateloginName, trigger: "blur" }],
		};

		const loginRef = ref()

		const submit = () => {
			loginForm.loginName = loginForm.loginName.trim();
			loginForm.password = loginForm.password.trim();
			
			(loginRef.value as { validate: Function }).validate((valid: false) => {
				
				if (valid) {
					request.sendRequest({
						address: 'sys/index/login',
						params: loginForm,
						success: (resp: RespData) => {
							if(resp.code !== SUCCESS) return ElMessage.error(resp.msg || '登入失败')

							useUser().setUserInfo({})
							ElMessage.success('登入成功')
							
						},
						fail: (resp: RespData) => {
							if(resp.code !== SUCCESS) return ElMessage.error(resp.msg || '登入失败')
						},
						method: "POST",
					})
					
				} else {
					console.log("error submit!!");
					return false;
				}
			});
		}

		return {
			loginForm,
			loginRef,
			rules,
			validatePassWord,
			validateloginName,
			// isLogin,
			request,
			submit
		};
	}
});
</script>

<style scoped lang="scss">
.login {
	// background: rgb(240, 248, 255);
	width: 100%;
	height: 100vh;
	position: relative;
	// display: flex;
	// justify-content: center;
	// align-items: center;
	// background: linear-gradient(45deg, #0081ff, #11b9d0);
	
	
	
	.login-card {
		display: flex;
		border-radius: 10px;
		position: absolute;
		z-index: 9;
		top: 30%;
		left: 30%;
		.login-bg {
			width: 400px;
			height: 400px;
			background: white;
			position: relative;
			border-top-left-radius: 8px;
			border-bottom-left-radius: 8px;
			box-shadow: 3px 3px 10px #ececec, -3px -2px 10px #ececec;
			// margin-right: 20px;

			& > img {
				width: 88%;
				// height: 65%;
				position: absolute;
				top: 5%;
				left: 5%;
				object-fit: cover;
			}

		}
		.login-form {
			width: 440px;
			height: 400px;
			background: white;
			border-top-right-radius: 8px;
			border-bottom-right-radius: 8px;
			box-shadow: 3px 3px 10px #ececec, -3px -2px 10px #ececec;

			.form-head {
				font-size: 28px;
				font-weight: 600;
				color: $mainColor;
				text-align: center;
				height: 35px;
				line-height: 35px;
				padding-top: 45px;
			}

			.form-content {
				padding: 20px 45px;
				padding-top: 35px;
			}
			// margin: auto;
		}
		
	}
	.login-btn {
		width: 100%;
		height: 40px;
		background: $mainColor;
		color: white;
	}
}
.login::after {
	display: block;
	content: '';
	width: 100%;
	height: 100vh;
	background-image: url('../../assets/image/bg2.png');
	background-repeat: no-repeat;
	background-position-x: 15%;
	filter: blur(5px);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
}
.login::before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(240, 248, 255, .1);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.el-form-item {
	margin-bottom: 50px;
}
</style>
